<template>
	<view class="container">
		
		<!-- 搜索框 -->
		<view class="search-bar">
			<input type="text" class="search-input" placeholder="输入会员手机号" v-model="searchQuery" @input="onSearch" />
			<view class="search-icon" @click="onSearchClick">
				<text>🔍</text>
			</view>
		</view>

		<!-- 会员列表 -->
		<view v-for="(member, index) in filteredMembers" :key="index" class="member-card">
			<!-- 同一行展示昵称和门店余额 -->
			<view class="info-row">
				<text class="nickname">昵称：{{ member.nickname }}</text>
				<text class="balance">门店余额：{{ member.balance }}</text>
			</view>
			<!-- 第二行展示手机号和总消费 -->
			<view class="info-row">
				<text class="phone">手机号：{{ member.phone }}</text>
				<text class="total-spent">总消费：{{ member.totalSpent }}</text>
			</view>
			<!-- 第三行展示总充值 -->
			<view>
				<text class="total-recharge">总充值：{{ member.totalRecharge }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchQuery: "", // 搜索内容
				members: [
					// 示例数据
					{
						nickname: "灵魂摆渡人",
						phone: "13812341234",
						balance: 2000,
						totalSpent: 20000,
						totalRecharge: 100000,
					},
					{
						nickname: "张三",
						phone: "13866668888",
						balance: 2000,
						totalSpent: 20000,
						totalRecharge: 100000,
					},
					{
						nickname: "李四",
						phone: "13999998888",
						balance: 3000,
						totalSpent: 15000,
						totalRecharge: 80000,
					},
					{
						nickname: "王五",
						phone: "13777778888",
						balance: 1000,
						totalSpent: 5000,
						totalRecharge: 50000,
					},
				],
				filteredMembers: [], // 筛选后的会员数据
			};
		},
		computed: {
			groupedMembers() {
				// 每行两组数据
				const rows = [];
				for (let i = 0; i < this.filteredMembers.length; i += 2) {
					rows.push(this.filteredMembers.slice(i, i + 2));
				}
				return rows;
			},
		},
		mounted() {
			// 初始化筛选列表
			this.filteredMembers = this.members;
		},
		onShow() {
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
			// this.loadRoom();
		},
		methods: {
			onSearch() {
				// 实时过滤会员列表
				const query = this.searchQuery.trim();
				this.filteredMembers = this.members.filter((member) =>
					member.phone.includes(query)
				);
			},
			onSearchClick() {
				// 搜索按钮触发
				this.onSearch();
			},
		},
	};
</script>
<style>
	.container {
		padding: 10px;
		background-color: #f5f5f5;
	}

	.navbar {
		text-align: center;
		padding: 10px 0;
		font-size: 20px;
		font-weight: bold;
	}

	.search-bar {
		display: flex;
		align-items: center;
		margin: 10px 0;
		background-color: #ffffff;
		border-radius: 5px;
		padding: 5px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.search-input {
		flex: 1;
		padding: 5px;
		font-size: 16px;
		border: none;
		outline: none;
	}

	.search-icon {
		width: 40px;
		text-align: center;
		font-size: 18px;
		color: #666666;
	}

	.member-card {
		background-color: #ffffff;
		padding: 10px;
		border-radius: 5px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		margin-bottom: 10px;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		/* 两端对齐 */
		margin-bottom: 5px;
		/* 行间距 */
	}

	.nickname,
	.balance,
	.phone,
	.total-spent,
	.total-recharge {
		font-size: 14px;
		color: #333333;
	}

	.nickname,
	.phone {
		font-weight: bold;
	}
</style>